<template>
  <a-drawer
    v-model:visible="visible"
    title="操作日志详情"
    width="650px"
    unmount-on-close
    :footer="null"
    @cancel="visible"
  >
    <a-descriptions bordered :column="1">
      <a-descriptions-item label="操作名称">
        {{ operateDetail.title }}
      </a-descriptions-item>
      <a-descriptions-item label="操作人">
        {{ operateDetail.operateName }}
      </a-descriptions-item>
      <a-descriptions-item label="请求地址">
        {{ operateDetail.operateUrl }}
      </a-descriptions-item>
      <a-descriptions-item label="请求方式">
        {{ operateDetail.requestMethod }}
      </a-descriptions-item>
      <a-descriptions-item label="执行方法">
        {{ operateDetail.method }}
      </a-descriptions-item>
      <a-descriptions-item label="请求IP">
        {{ operateDetail.operateIp }}
      </a-descriptions-item>
      <a-descriptions-item label="浏览器">
        {{ operateDetail.browser }}
      </a-descriptions-item>
      <a-descriptions-item label="操作系统">
        {{ operateDetail.os }}
      </a-descriptions-item>
      <a-descriptions-item label="耗时">
        {{ operateDetail.costTime }}
      </a-descriptions-item>
      <a-descriptions-item label="操作时间">
        {{ operateDetail.operateTime }}
      </a-descriptions-item>
      <a-descriptions-item label="提示消息">
        {{ operateDetail.resultMsg }}
      </a-descriptions-item>
      <a-descriptions-item label="响应码">
        {{ operateDetail.status }}
      </a-descriptions-item>
      <a-descriptions-item label="请求参数" style="padding: 0">
        <code-mirror
          v-model="operateParam"
          basic
          :lang="lang"
          :extensions="extensions"
        />
      </a-descriptions-item>
      <a-descriptions-item label="响应数据">
        <code-mirror
          v-if="resultData"
          v-model="resultData"
          basic
          :lang="lang"
          :extensions="extensions"
        />
        <a-empty v-else />
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import { loggerOperateDetail, SysLogOperate } from '@/api/logger/operate';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
import CodeMirror from 'vue-codemirror6';

const visible = ref(false);

const operateDetail = ref<SysLogOperate>();

const lang = javascript();

const extensions = [oneDark];

const operateParam = ref();

const resultData = ref();

const open = (id: string) => {
  loggerOperateDetail(id).then(res => {
    operateDetail.value = res.data;
    if (operateDetail.value?.operateParam) {
      operateParam.value = JSON.stringify(JSON.parse(operateDetail.value?.operateParam), null, 2);
    }
    if (operateDetail.value?.resultData) {
      resultData.value = JSON.stringify(JSON.parse(operateDetail.value?.resultData), null, 2);
    }
    visible.value = true;
  });
};

const close = () => {
  visible.value = false;
};

defineExpose({
  open,
  close
});
</script>

<script lang="ts">
export default {
  name: 'drawer-detail'
};
</script>

<style scoped>

</style>